<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../../vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 
      事件函数的传参和event
        * 不传实参，则事件函数的第一个形参就是event事件对象
        * 当事件函数需要传参的时候,直接在函数名后边添加括号即可，事件函数如果传参,就会覆盖event事件对象
        * 如果已经传参的函数想要接受event事件对象?在事件的插值语法区域本身就存在一个$event变量,代表的是当前事件的event事件对象

     -->
      <!--所有指令的简写形式都不带：，除了v-bind本身的简写就是： -->
      <!-- 1.不传实参 -->
      <button @click="fn1">点击fn1</button>
      <!-- 2.传实参 -->
      <button @click="fn2(444)">点击fn2</button>
      <!-- 3.传实参且想要event事件对象  $event -->
      <button @click="fn3(444,$event)">点击fn3</button>
    </div>
    <script>
      const vm = new Vue({
        el: '#app',
        data() {
          return {};
        },
        methods: {
          fn1(e) {
            console.log(e);
          },
          fn2(a) {
            console.log(a);
          },
          fn3(a,e) {
            console.log(a,e);
          },
        },
      });
    </script>
  </body>
</html>
